<template>
	<view class="page"> 
	 <p class="p1">欢迎使用</p>
	 <p class="p2">个人检测健康档案</p>
	 
	 <view class="box_1">
	 	  <view class="main_box" style="" @click="Go_dianzijiance">
		   <image class="image_1" src="../../static/image/jiankang1.png" style="" mode=""></image>
			<image class="image_2" src="../../static/image/jiankang2.png" mode=""></image>
			<span class="sp_1 white">电子检测</span>
			<!-- <span class="sp_2 white">健康检测在线评估</span> -->
	 	  </view>
		<view class="main_box" style="box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0,0,0,0.08);"  @click="Go_putongjiance">
			<image class="image_1" src="../../static/image/jiankang1.png" style="" mode=""></image>
					<!-- <image class="image_2"  src="../../static/image/jiankang3.png" mode=""></image> -->
					<image class="image_2" src="../../static/image/jiankang2.png" mode=""></image>
					<span class="sp_1 white " >普通检测</span>
					<!-- <span class="sp_2">检测记录及报告查询</span> -->
		</view>
	 </view>
	 <view class="box_1" @click="my_text">
	 	 <!-- 	  <view class="main_box" >
	 		   <image class="image_1" src="../../static/image/jiankang1.png" style="" mode=""></image>
	 			<image class="image_2" src="../../static/image/jiankang2.png" mode=""></image>
	 			<span class="sp_1 white">在线检测</span>
	 			<span class="sp_2 white">健康检测在线评估</span>
	 	 	  </view> -->
	 		<view class="main_box" style="background-color: rgba(30, 144, 255,0.08);"  >
				<image class="image_1" src="../../static/image/box2_img.png" style="width: 720rpx;" mode=""></image>
	 					<image class="image_2"  src="../../static/image/jiankang3.png" mode=""></image>
	 					<span class="sp_1 " >我的检测</span>
	 					<span class="sp_2">检测记录及报告查询</span>
	 		</view>
	 	 </view>
	 
	<!-- <view class="box_2">
	 	<view class="main_box"  style="background-color:#00B6E2 ;">
	 				<image  src="../../static/image/jiankang4.png" mode=""></image>
	 				<span class="sp_1 white">风险咨询</span>
	 	</view>
		<view class="main_box" style="background-color:#B675FF ;" >
					<image  src="../../static/image/jiankang5.png" mode=""></image>
					<span class="sp_1 white">预约检测</span>
		</view>
	 </view> -->
	 
	 
	 
	 <!-- <p class="p3">常用功能 <span class="sp_1">查看更多</span> </p> -->
	 
	 <view class="box_4" @click="more">
	 	   <view class="main_box">
	 	   	<image class="image_1" src="../../static/image/box4_1.png" style="" mode=""></image>
	 	   				<!-- <image class="image_2" src="../../static/image/box4_2.png" mode=""></image> -->
						<uni-icons class="image_2" type="more-filled" size="30" color="#2395EC"></uni-icons>
						<span class="sp_1" >更多功能</span>
	 	   </view>
		<!--   <view class="main_box">
		   	<image class="image_1" src="../../static/image/box4_3.png" style="" mode=""></image>
		   				<image class="image_2" src="../../static/image/box4_4.png" style="width: 85rpx;height: 96rpx;" mode=""></image>
		   				<span class="sp_1" style="color: #BE2600;">自检提醒</span>
		   </view> -->
		<!--   <view class="main_box">
		   	<image class="image_1" src="../../static/image/box4_5.png" style="" mode=""></image>
		   				<image class="image_2" style="width: 88rpx;height: 116rpx;" src="../../static/image/box4_6.png" mode=""></image>
		   				<span class="sp_1" style="color: #1F1F85;">风险告知</span>
		   </view>
		   <view class="main_box">
		   	<image class="image_1" src="../../static/image/box4_7.png" style="" mode=""></image>
		   				<image class="image_2" style="width: 93rpx;height: 96rpx;" src="../../static/image/box4_8.png" mode=""></image>
		   				<span class="sp_1" style="color: #00736D;">科普知识</span>
		   </view> -->
	 </view>
	 
	 <view class="box_3">
	 	    <image class="img_1" src="../../static/image/jiankang6.png" mode=""></image>
	 			<p class="p1">风险告知:  <span style="color: #767575;">您的检测结果有问题，请去最近的VCT门诊</span>
	 			  <image class="img_2"  src="../../static/image/jiankang7.png" mode=""></image>
	 			  </p>
	 			<p class="p1">健康提醒:  <span  style="color: #767575;">距上次检测已过XX天</span> <image class="img_2"  src="../../static/image/jiankang7.png" mode=""></image> </p>
	 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navHeight: '',
				statusBarHeight: '',
				showTabber:true//tabber不显示
			}
		},
		onLoad() {
			//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
			uni.getSystemInfo({
				success: (e) => {
					// this.compareVersion(e.SDKVersion, '2.5.0')
					let statusBar = 0
					let customBar = 0
			
			
					// #ifdef MP
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					if (e.platform === 'android') {
						// this.$store.commit('SET_SYSTEM_IOSANDROID', false)
						customBar = e.statusBarHeight + 50
					}
					// #endif
			
			
					// #ifdef MP-WEIXIN
					statusBar = e.statusBarHeight
					// @ts-ignore
					const custom = wx.getMenuButtonBoundingClientRect()
					customBar = custom.bottom + custom.top - e.statusBarHeight
					// #endif
			
					// #ifdef APP-PLUS
					console.log('app-plus', e)
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					// #endif
			
			
					// #ifdef H5
					statusBar = 0
					customBar = e.statusBarHeight + 45
					// #endif
			
					// 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
					this.statusBarHeight = statusBar
					this.navHeight = customBar
				}
			})
		},
		methods: {
			//更多功能按钮
			more(){
				uni.navigateTo({
					url:'/page_jiankangdangan/Morefeatures/index'
				})
			},
			//我的检测按钮
			my_text(){
			   uni.navigateTo({
			   	url:'/page_jiankangdangan/wodejiance_01/wodejiance_01'
			   })
			},
			//普通检测
			Go_putongjiance(){
				uni.navigateTo({
					url:'/page_jiankangdangan/putongjiance/putongjiance'
				})
			},
			//电子检测
			Go_dianzijiance(){
				uni.switchTab({
					url:'/pages/home/index'
				})
			}
			
		},
		mounted() {
			console.log('当前ID',this.$store.state.vx_uid);
		}
	}
</script>

<style lang="scss" scoped>
.page {
		width: 100vw;
		height: 100vh;
		position: relative;
		display: flex;
		flex-direction: column;
		.white{
			color: #FFFFFF;
		}
		.p1{
			color: #9B9BA6;
			margin-left: 19rpx;
			margin-top: 13rpx;
		}
		.p2{
			font-size: 46rpx;
			color: #332112;
			margin-left: 19rpx;
			margin-top: 13rpx;
		}
		.p3{
			font-size: 35rpx;
			color: #332112;
			margin-left: 19rpx;
			margin-top: 13rpx;
			.sp_1{
				display: inline-block;
				float: right;
				color: #8C8C8C;
				font-size: 24rpx;
				font-weight: 400;
				margin-right: 20rpx;
			}
		}
		
		.box_1{
			display: flex;
			.main_box{
				width: 720rpx;
				height: 350rpx;
				border-radius: 17rpx;
				margin: 12rpx;
				background-size: cover;
				position: relative;
					
				.image_1{
					position: absolute;
					width: 350rpx;
					height: 350rpx;
					z-index: 1;
				}
				.image_2{
					position: absolute;
					top:27rpx ;
					left:27rpx ;
					width: 128rpx;
					height:  128rpx;
					z-index: 2;
				}
				.sp_1{
					position: absolute;
					top: 205rpx;
					left: 27rpx;
					display: block;
					width: 169rpx;
					height: 42rpx;
					font-size: 42rpx;
					line-height: 42rpx;
					font-weight: 600;
					z-index: 2;
				}
				.sp_2{
					position: absolute;
					top: 270rpx;
					left: 27rpx;
					display: block;
					width: 250rpx;
					height: 42rpx;
					line-height: 42rpx;
					font-weight: 400;
					font-size: 27rpx;
					z-index: 2;
				}
			}
		}
		.box_2{
			display: flex;
			.main_box{
				width: 355rpx;;
				height: 112rpx;
				border-radius: 17rpx;
				margin: 12rpx;
				position: relative;
				image{
					margin: 19rpx 0 0 19rpx;
					width: 76rpx;
					height:  76rpx;
				}
				.sp_1{
					position: absolute;
					display: block;
					top: 42rpx;
					left: 107rpx;
					width: 150rpx;
					height: 27rpx;
					font-size: 31rpx;			
				}
			}
		}
		
		.box_3{
			width: 720rpx;
			height: 150rpx;
			background: #FAFAFA;
			border-radius: 19rpx;
			margin: 18rpx;
				
			.img_1{
				width: 95rpx;
				height: 21rpx;
				margin: 19rpx;
			}
			.p1{
				font-size: 23rpx;
				color: black;
				// margin-top: 0;
				.img_2{
					width: 24rpx;
					height: 24rpx;
					float: right;
				}
			}
		}
		
		.box_4{
			display: flex;
			flex-wrap: wrap;
			.main_box{
				width: 720rpx;
				height: 180rpx;
				margin: 12rpx;
				border-radius: 19rpx;
				position: relative;
				.image_1{
					width: 720rpx;
					height: 180rpx;
					z-index: 1;
				}
				.image_2{
					position: absolute;
					top:44rpx ;
					right:19rpx ;
					width: 105rpx;
					height:  88rpx;
					z-index: 2;
				}
				.sp_1{
					position: absolute;
					top: 70rpx;
					left: 23rpx;
					display: block;
					z-index: 2;
					
					width: 138rpx;
					height: 35rpx;
					font-size: 33rpx;
					font-weight: 600;
					color: #035EA4;
				}
			}
		}
		}
</style>
